<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>*B源码网</title>
    <style>
        /* BASE CSS */
        *{
            margin: 0;
            padding: 0;
            font-size: 14px;
            line-height: 1.2;
            color: #333333;
        }
        html,body{
            /* width: 100%; */
            height: 100%;
        }
        /* 首页样式 */
        .bg-out{
            width: 100%;
            height: 100%;
            background-image: url('./bg/bg-index.jpg');
            background-size: cover;
            background-position: center center;
        }
        .bg-mask{
            width: 100%;
            height: 100%;
            background-color: transparent;
            position: relative;
        }
        .top{
            width:100%;
            padding-top:15%;
        }
        .top-logo{
            width: 150px;
            margin: 0 auto;
        }
        .top-logo-img{
            width: 100%;
        }
        .top-desc{
            font-size: 28px;
            color: #FFFFFF;
            text-align: center;
            padding: 34px 0px 46px 0px;
        }
        .body{
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .body-box{
            width: 49.5%;
            min-width: 420px;
        }
        .body-box-l{
            text-align: right;
        }
        .body-box-r{
            text-align: left;
        }
        .body-search-out{
            display:inline-block;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 6px;
            box-sizing: border-box;
            padding: 6px;
        }
        .body-search-in{
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .body-search-in-l{}
        .body-search-in-l-input{
            outline: none;
            border: none;
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            width: 320px;
            height: 38px;
            box-sizing: border-box;
            padding: 0px 18px;
        }
        .body-search-in-r{}
        .body-search-in-r-btn{
            outline: none;
            border: none;
            width: 80px;
            height: 38px;
            line-height: 38px;
            background: linear-gradient(to right, #0174ff 0%, #12aaff 100% );
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
        }
        .body-search-in-r-btn-txt,.body-search-in-r-btn-icon{
            display: inline-block;
            vertical-align: middle;
        }
        .body-search-in-r-btn-txt{
            font-size: 16px;
            color: #FFFFFF;
            margin-right: 6px;
        }
        .body-search-in-r-btn-icon{
            width: 18px;
            height: 18px;
        }
        .copyright{
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            width: 80%;
            text-align: center;
            font-size: 16px;
            color: #FFFFFF;
        }
        /* media */
        @media screen and (max-width: 880px){
            .bg-mask{
                background-color: rgba(255, 255, 255, 0.18);
            }
            .top{
                padding-top:10%;
            }
            .top-desc{
                font-size:22px;
                padding: 34px 0px 180px 0px;
            }
            .body{
                display: block;
            }
            .body-box{
                width: 100%;
                min-width: 360px;
                text-align: center;
            }
            .body-box-l{
                padding-bottom: 42px;
            }
            .body-search-in-l-input{
                width: 260px;
                height: 32px;
            }
            .body-search-in-r-btn{
                width: 68px;
                height: 32px;
                line-height: 32px;
            }
            .body-search-in-r-btn-txt{
                font-size: 14px;
                margin-right: 4px;
            }
            .body-search-in-r-btn-icon{
                width: 16px;
                height: 16px;
            }
            .copyright{
                font-size: 14px;
            }
        }
        @media screen and (max-width:320px){
            .bg-mask{
                background-color: rgba(255, 255, 255, 0.18);
            }
            .top{
                padding-top:12%;
            }
            .top-desc{
                font-size:18px;
                padding: 18px 0px 100px 0px;
            }
            .body{
                display: block;
            }
            .body-box{
                width: 100%;
                min-width: 280px;
                text-align: center;
            }
            .body-box-l{
                padding-bottom: 42px;
            }
            .body-search-in-l-input{
                width: 220px;
                height: 32px;
            }
            .body-search-in-r-btn{
                width: 58px;
                height: 32px;
                line-height: 32px;
            }
            .body-search-in-r-btn-txt{
                font-size: 14px;
                margin-right: 4px;
            }
            .body-search-in-r-btn-icon{
                width: 16px;
                height: 16px;
            }
            .copyright{
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
    <div class="bg-out">
        <div class="bg-mask">
            <div class="top">
                <div class="top-logo">
                    <img class="top-logo-img" src="./LOGO.png" alt="那源码网" title="那源码网">
                </div>
                <div class="top-desc">输入你想搜索的关键词进行搜索</div>
            </div>
            <div class="body">
                <div class="body-box body-box-l">
                    <form class="body-search-out" action="./index.html" method="GET" name="baidu">
                        <div class="body-search-in">
                            <div class="body-search-in-l">
                                <input class="body-search-in-l-input" type="text" name="key_words" placeholder="百度搜索">
                            </div>
                            <div class="body-search-in-r">
                                <button class="body-search-in-r-btn" type="submit">
                                    <span class="body-search-in-r-btn-txt">搜索</span>
                                    <img class="body-search-in-r-btn-icon" src="./icon/search.svg" alt="搜索" title="搜索">
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="body-box body-box-r">
                    <form class="body-search-out" action="./index.html" method="GET" name="local">
                        <div class="body-search-in">
                            <div class="body-search-in-l">
                                <input class="body-search-in-l-input" type="text" name="key_words" placeholder="本地搜索">
                            </div>
                            <div class="body-search-in-r">
                                <button class="body-search-in-r-btn" type="submit">
                                    <span class="body-search-in-r-btn-txt">搜索</span>
                                    <img class="body-search-in-r-btn-icon" src="./icon/search.svg" alt="搜索" title="搜索">
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
            <div class="copyright">
                Copyright&copy; 2009-2013 OKBASE.NET All Right Reserved 好库网 版权所有
            </div>
        </div>
    </div>
</body>
</html>